<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>主页</title>
  <!-- 引入 select2 插件的 CSS 文件 -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <style>
    body {
      background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }

    .card {
      background: #fff;
      max-width: 500px;
      margin: 3rem auto;
      border-radius: 18px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
      padding: 2.5rem 2rem 2rem 2rem;
      position: relative;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 2.5rem;
      font-size: 2.1rem;
      letter-spacing: 2px;
      font-weight: 700;
    }

    .form-group {
      margin-bottom: 1.7rem;
    }

    label {
      display: block;
      margin-bottom: 0.6rem;
      font-weight: 600;
      color: #222;
      font-size: 1.08rem;
    }

    input[type="date"],
    select {
      width: 100%;
      padding: 0.85rem 1rem;
      border: 1.5px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1rem;
      box-sizing: border-box;
      background: #f8fafc;
      transition: border 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    input[type="date"]:focus,
    select:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.13);
    }

    .button-group {
      margin-top: 2.5rem;
      text-align: center;
    }

    button#submitBtn {
      padding: 0.9rem 2.2rem;
      background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(52,152,219,0.08);
      transition: background 0.2s, transform 0.2s;
    }

    button#submitBtn:hover {
      background: linear-gradient(90deg, #2980b9 0%, #3498db 100%);
      transform: translateY(-2px) scale(1.03);
    }

    @media (max-width: 600px) {
      .card {
        padding: 1.2rem 0.5rem;
        max-width: 98vw;
      }
      h1 {
        font-size: 1.3rem;
      }
    }

    /* 自定义 select2 输入框样式 */
    .select2-container .select2-selection--single {
      height: 40px; /* 设置高度 */
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 40px; /* 垂直居中文字 */
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 38px; /* 调整箭头高度 */
    }
    /* 自定义 select2 多选样式，模拟复选框 */
    .select2-selection--multiple .select2-selection__choice {
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 2px 8px;
      margin: 2px;
    }
    .select2-selection--multiple .select2-selection__choice__remove {
      color: white;
      margin-right: 5px;
    }
    .select2-container--default .select2-results__option[aria-selected="true"] {
      background-color: #f5f5f5;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #3498db;
      color: white;
    }
    /* 添加复选框样式 */
    .select2-container--default .select2-results__option {
      padding: 6px 12px;
      position: relative;
    }
    .select2-container--default .select2-results__option::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #3498db;
      border-radius: 3px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .select2-container--default .select2-results__option[aria-selected="true"]::before {
      background-color: #3498db;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* 调整下拉框样式 */
    .select2-container--default .select2-results > .select2-results__options {
      max-height: 300px;
      overflow-y: auto;
    }
    .select2-container--default .select2-selection--multiple {
      min-height: 40px;
      padding: 2px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>鸡智宝数据查询主页</h1>
    <div class="form-group">
      <label for="dateInput">选择日期:</label>
      <input type="date" id="dateInput">
    </div>
    <div class="form-group">
      <label for="nameSelect">选择名称:</label>
      <!-- 添加 multiple 属性支持多选，添加类名用于初始化 select2 -->
      <select id="nameSelect" class="js-example-basic-multiple" multiple style="width: 100%;">
        <option value="漯河禽业商品鸡">漯河禽业商品鸡</option>
        <option value="漯河禽业种鸡">漯河禽业种鸡</option>
        <option value="西华商品鸡">西华商品鸡</option>
        <option value="西华商品鸡01场">西华商品鸡01场</option>
        <option value="西华商品鸡02场">西华商品鸡02场</option>
        <option value="西华商品鸡03场">西华商品鸡03场</option>
        <option value="西华商品鸡04场">西华商品鸡04场</option>
        <option value="西华商品鸡05场">西华商品鸡05场</option>
        <option value="西华商品鸡06场">西华商品鸡06场</option>
        <option value="西华商品鸡07场">西华商品鸡07场</option>
        <option value="西华商品鸡08场">西华商品鸡08场</option>
        <option value="西华商品鸡09场">西华商品鸡09场</option>
        <option value="西华商品鸡10场">西华商品鸡10场</option>
        <option value="西华商品鸡11场">西华商品鸡11场</option>
        <option value="西华商品鸡12场">西华商品鸡12场</option>
        <option value="西华商品鸡13场">西华商品鸡13场</option>
        <option value="西华商品鸡14场">西华商品鸡14场</option>
        <option value="西华商品鸡15场">西华商品鸡15场</option>
        <option value="西华商品鸡16场">西华商品鸡16场</option>
        <option value="西华商品鸡17场">西华商品鸡17场</option>
        <option value="西华商品鸡18场">西华商品鸡18场</option>
        <option value="西华商品鸡21场">西华商品鸡21场</option>
        <option value="西华种鸡">西华种鸡</option>
        <option value="阜新商品鸡">阜新商品鸡</option>
        <option value="阜新商品鸡01场">阜新商品鸡01场</option>
        <option value="阜新商品鸡02场">阜新商品鸡02场</option>
        <option value="阜新商品鸡03场">阜新商品鸡03场</option>
        <option value="阜新商品鸡04场">阜新商品鸡04场</option>
        <option value="阜新商品鸡05场">阜新商品鸡05场</option>
        <option value="阜新商品鸡06场">阜新商品鸡06场</option>
        <option value="阜新商品鸡07场">阜新商品鸡07场</option>
        <option value="阜新商品鸡08场">阜新商品鸡08场</option>
        <option value="阜新商品鸡09场">阜新商品鸡09场</option>
        <option value="阜新商品鸡10场">阜新商品鸡10场</option>
        <option value="阜新商品鸡11场">阜新商品鸡11场</option>
        <option value="阜新商品鸡12场">阜新商品鸡12场</option>
        <option value="阜新商品鸡13场">阜新商品鸡13场</option>
        <option value="阜新商品鸡14场">阜新商品鸡14场</option>
        <option value="阜新商品鸡15场">阜新商品鸡15场</option>
        <option value="阜新商品鸡16场">阜新商品鸡16场</option>
        <option value="阜新商品鸡17场">阜新商品鸡17场</option>
        <option value="阜新商品鸡18场">阜新商品鸡18场</option>
        <option value="阜新商品鸡19场">阜新商品鸡19场</option>
        <option value="阜新种鸡">阜新种鸡</option>
        <option value="漯河禽业商品鸡01场">漯河禽业商品鸡01场</option>
        <option value="漯河禽业商品鸡02场">漯河禽业商品鸡02场</option>
        <option value="漯河禽业商品鸡03场">漯河禽业商品鸡03场</option>
        <option value="漯河禽业商品鸡04场">漯河禽业商品鸡04场</option>
        <option value="漯河禽业商品鸡05场">漯河禽业商品鸡05场</option>
        <option value="漯河禽业商品鸡06场">漯河禽业商品鸡06场</option>
        <option value="漯河禽业商品鸡07场">漯河禽业商品鸡07场</option>
        <option value="漯河禽业商品鸡08场">漯河禽业商品鸡08场</option>
        <option value="漯河禽业商品鸡09场">漯河禽业商品鸡09场</option>
        <option value="漯河禽业商品鸡10场">漯河禽业商品鸡10场</option>
        <option value="漯河禽业商品鸡11场">漯河禽业商品鸡11场</option>
        <option value="漯河禽业商品鸡12场">漯河禽业商品鸡12场</option>
        <option value="漯河禽业商品鸡13场">漯河禽业商品鸡13场</option>
        <option value="漯河禽业商品鸡14场">漯河禽业商品鸡14场</option>
        <option value="漯河禽业商品鸡15场">漯河禽业商品鸡15场</option>
        <option value="漯河禽业商品鸡16场">漯河禽业商品鸡16场</option>
        <option value="漯河禽业商品鸡17场">漯河禽业商品鸡17场</option>
        <option value="漯河禽业商品鸡18场">漯河禽业商品鸡18场</option>
        <option value="漯河禽业商品鸡19场">漯河禽业商品鸡19场</option>
        <option value="漯河禽业商品鸡20场">漯河禽业商品鸡20场</option>
        <option value="漯河禽业商品鸡21场">漯河禽业商品鸡21场</option>
        <option value="漯河禽业商品鸡22场">漯河禽业商品鸡22场</option>
        <option value="漯河禽业商品鸡23场">漯河禽业商品鸡23场</option>
        <option value="漯河禽业商品鸡24场">漯河禽业商品鸡24场</option>
      </select>
    </div>
    <div class="form-group">
      <label for="isAudit">是否审核:</label>
      <select id="isAudit">
        <option value="Y">是</option>
        <option value="N">否</option>
      </select>
    </div>
    <div class="form-group">
      <label for="isSend">是否上传:</label>
      <select id="isSend">
        <option value="Y">是</option>
        <option value="N">否</option>
      </select>
    </div>
    <div class="button-group">
      <!-- 为按钮添加点击事件 -->
      <button id="submitBtn" type="button" onclick="submitForm()">提交数据</button>
    </div>
    <!-- 引入 jQuery 和 select2 插件的 JavaScript 文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
      $(document).ready(function() {
        // 初始化 select2 插件
        $('.js-example-basic-multiple').select2({
          placeholder: "请选择名称",
          allowClear: true,
          minimumResultsForSearch: 0,
          language: {
            noResults: function() {
              return "未找到匹配结果";
            }
          }
        });
      });

      function submitForm() {
        // 禁用按钮
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.style.pointerEvents = 'none';
        submitBtn.style.opacity = '0.6';
        submitBtn.style.backgroundColor = '#ccc';

        const dateInput = document.getElementById('dateInput').value;
        const nameSelect = $('#nameSelect').select2('data').map(item => item.id);
        const isAudit = document.getElementById('isAudit').value;
        const isSend = document.getElementById('isSend').value;

        // 构建请求 URL
        const url = `/insertData?date=${encodeURIComponent(dateInput)}&names=${nameSelect.map(encodeURIComponent).join(',')}&isAudit=${encodeURIComponent(isAudit)}&isSend=${encodeURIComponent(isSend)}`;

        // 发送 GET 请求
        fetch(url)
                .then(response => response.text())
                .then(data => {
                  alert(data); // 显示后端返回的消息
                  // 恢复按钮状态
                  submitBtn.style.pointerEvents = 'auto';
                  submitBtn.style.opacity = '1';
                  submitBtn.style.backgroundColor = '#3498db';
                })
                .catch(error => {
                  console.error('Error:', error);
                  alert('请求出错，请稍后重试');
                  // 恢复按钮状态
                  submitBtn.style.pointerEvents = 'auto';
                  submitBtn.style.opacity = '1';
                  submitBtn.style.backgroundColor = '#3498db';
                });
      }
    </script>
  </div>
</body>
</html>
